<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
  <div>
    <header>
      <h1>FusionTable Test</h1>
    </header>
    
    <h2>Columns</h2>
    <ol id="cols"></ol>
    
    <h2>Rows</h2>
    <ol id="rows"></ol>
    
    <script>
      function refreshData() {
        var api_url = "https://www.google.com/fusiontables/api/query?sql="
        var query = "SELECT%20*%20FROM%201GskUvPQ8Rf7J6cDP9_F-T0Vy5j1E4HzvbrgOFsA"
        // Hit the Google Fusion Table
        $.getJSON(api_url + query + '&jsonCallback=?', function(json) {
          $.each(json.table.cols, function(index, value) { 
            $('#cols').append('<li>' + value + '</li>');
          });
          // var rows = json.table.rows;
          $.each(json.table.rows, function(index, value) { 
            $('#rows').append('<li>' + value + '</li>');
          });
        });
        // setTimeout(refreshData(), 100000 * 2 );
      }
      refreshData();
    </script>

    <footer>
     <p>&copy; Hatem Mahmoud</p>
    </footer>
  </div>
</body>
</html>
